<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>三行布局</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <header>
    <h1>Header.com</h1>
  </header>
  <main>
    <p>
      <a href="http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html">只要一行代码，实现五种 CSS 经典布局</a>
    </p>
    <p>三明治布局指的是，页面在垂直方向上，分成三部分：页眉、内容区、页脚。</p>
    <p>这个布局会根据设备宽度，自动适应，并且不管内容区有多少内容，页脚始终在容器底部（粘性页脚）。也就是说，这个布局总是会占满整个页面高度。

    </p>
    <p>上面代码写在容器上面，指定采用 Grid 布局。核心代码是grid-template-rows那一行，指定垂直高度怎么划分，这里是从上到下分成三部分。</p>
    <p>一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；</p>
    <p>第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。</p>
  </main>
  <footer>Footer Content — Header.com 2020</footer>
</body>

</html>